<template>

	<div>

		<el-form :inline="true" :model="query" class="demo-form-inline">
			<el-form-item label="账号名">
				<el-input v-model="query.LoginName" placeholder="账号名"></el-input>
			</el-form-item>

			<el-form-item>
				<el-button type="primary" @click="onSubmit">查询</el-button>
			</el-form-item>

		<!-- 	<el-form-item>
				<el-button type="primary" @click="tianjia=true"
					style="background-color: red;border: none;">添加</el-button>
			</el-form-item> -->
		</el-form>

		<template>
			<el-table :data="tableData" style="width: 100%" max-height="400">

				<el-table-column fixed prop="Id" label="编号" width="50">
				</el-table-column>

				<el-table-column fixed prop="UserName" label="用户" width="100">
				</el-table-column>

				<el-table-column prop="LoginName" label="账户名" width="120">
				</el-table-column>

				<el-table-column prop="LoginPwd" label="密码" width="120">
				</el-table-column>

				<el-table-column prop="LoginCount" label="登录次数" width="120">
				</el-table-column>

				<el-table-column prop="LoginLastTime" label="上一次登录时间" width="120">
				</el-table-column>

				<el-table-column prop="CreateTime" label="时间" width="180">
				</el-table-column>

				<el-table-column prop="Status" label="状态" width="120">
					<template slot-scope="scope">
						{{scope.row.Status==0? '正常':'禁用'}}
					</template>
				</el-table-column>

				<el-table-column prop="IsDelete" label="是否删除" width="120">
					<template slot-scope="scope">
						{{scope.row.IsDelete==0? '未删除':'已删除'}}
					</template>
				</el-table-column>

				<el-table-column fixed="right" label="操作" width="200">

					<template slot-scope="scope">
						<el-button type="text" size="small" @click="update(scope.row.Id)">修改</el-button>

						<template >
							<el-popconfirm confirm-button-text='好的' cancel-button-text='不用了' icon="el-icon-info"
								icon-color="red" title="这是一段内容确定删除吗？" @confirm="Delete(scope.row.Id)">
								<el-button slot="reference" @click="" type="text" size="small" style="margin-left: 15px;">
									删除
								</el-button>
							</el-popconfirm>
						</template>


					</template>
				</el-table-column>
			</el-table>

			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="query.PageIndex" :page-sizes="[5,10, 20, 30, 40]" :page-size="query.PageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="query.total">
			</el-pagination>
		</template>

		<el-dialog title="修改" :visible.sync="updateVisible" :destroy-on-close="false">
			<login-update :Id="Id" v-if="updateVisible" @close="()=>{updateVisible=false;getdata()}"></login-update>
		</el-dialog>

		<!-- <el-dialog title="添加" :visible.sync="tianjia">
			<LoginAdd @close="()=>{tianjia=false;getdata()}" v-if="tianjia"></LoginAdd>
		</el-dialog> -->
	</div>

</template>

<script>
	import LoginAdd from "./LoginAdd.vue"
	import LoginUpdate from "./LoginUpdate.vue"
	import LoginApi from "@/api/LoginApi.js"

	export default {
		data() {
			return {
				Id: 0,
				query: {
					LoginName: "",
					PageSize: 5,
					PageIndex: 1,
					total: 0
				},
				updateVisible: false,
				tianjia: false,
				tableData: [{}],

			}
		},
		components: {
			LoginUpdate
			// LoginAdd
		},
		methods: {
			getdata() {
				LoginApi.query(this.query).then(res => {
					if (res.code == 1) {
						this.tableData = res.data.data
						this.query.total = res.data.total;
					}
				})
			},
			update(id) {
				this.updateVisible = true;
				this.Id = id;
			},
			Delete(id) {
				LoginApi.Delete(id).then(res => {
					if (res.code == 1) {
						console.log(res);
						this.$message({
							message: "删除成功",
							type: "success"
						})
						this.getdata()
						// this.$emit('close')						
					}
				})
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.query.PageSize = val;
				this.getdata();
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.query.PageIndex = val;
				this.getdata();
			},
			onSubmit() {
				this.query.PageIndex = 1;
				this.getdata();
			},
		},
		created() {
			this.getdata()
		}
	}
</script>

<style>

</style>